<div
  class="notifications__toast__content notifications__toast__content--{{@toast.props.type}}"
>
  <p class="notifications__toast__content__msg">
    {{#if hasBlock}}
      {{yield
        (hash
          content=@toast.props.content
        )
      }}
    {{else}}
      {{split-text @toast.props.content this.maxToastCharLength}}
    {{/if}}
  </p>

  {{#if (and (not hasBlock) (gt @toast.props.content.length this.maxToastCharLength))}}
    <button
      class="nacho-button nacho-button--tertiary notifications__toast__content-detail"
      onclick={{action @onShowDetail}}
    >
      See Detail
    </button>
  {{/if}}
</div>

<button
  class="notifications__toast__dismiss"
  onclick={{action @onDismiss}}
>
  {{#if @toast.props.dismissButtonText}}
    <span class="sr-only">{{@toast.props.dismissButtonText}}</span>
  {{/if}}
  &times;
</button>
